{{define "title"}}{{.Project}} Recent Runs - LUCI Change Verifier{{end}}

{{define "head"}}
  <style type="text/css">

    .tall-cell {
    padding: 0px 5px;
      overflow-y: auto;
      max-height: 100px;
      border: #eee;
      border-style: solid;
      border-width: thin;
    }
  </style>
{{end}}

{{define "content"}}
  <h2>Recent
    {{if .FilterMode}}
      {{Title .FilterMode -}}s
    {{else}}
      Runs
    {{end}}

    {{if .FilterStatus}}
      with Status "{{Title .FilterStatus}}"
    {{end}}

    {{if .Project}}
      for LUCI Project "{{.Project}}"
    {{end}}
  </h2>

  <div class="container">
    <table class="table table-striped" id="runs-table">
      <thead>
        <tr>
          <th style="width: 10%;">PROJECT</th>
          <th style="width: 27.5%;">ID</th>
          <th style="width: 10%;">MODE</th>
          <th style="width: 10%;">STATUS</th>
          <th style="width: 20%;">CREATE_TIME</th>
          <th style="width: *">CLs</th>
        </tr>
      </thead>
      <tbody>
        {{$Now := .Now}}
        {{$Project := .Project}}
        {{range .Runs}}
          <tr>
            <td><a href="/ui/recents/{{.ID.LUCIProject}}">{{.ID.LUCIProject}}</a></td>
            <td>
              <a href="/ui/run/{{.ID}}">
                ({{slice .ID.Inner 5 10}})
              </a>
              <em>
                {{.ID.Inner}}
              </em>
            </td>
            <td><a href="/ui/recents/{{$Project}}?mode={{.Mode}}">{{.Mode}}</a></td>
            <td><a href="/ui/recents/{{$Project}}?status={{.Status}}">{{.Status}}</a></td>
            <td>
              <span title="{{RelTime .CreateTime $Now}}" class="unix-timestamp">
                {{.CreateTime.Unix}}
              </span>
            </td>
            <td>
              {{if (gt (len .ExternalCLs) 5)}}
              <div class="tall-cell">
              <p>{{ len .ExternalCLs }} total CLs</p>
              {{else}}
              <div>
              {{end}}
              <ul>
              {{range .ExternalCLs}}
                <li><a href="{{.MustURL}}">{{DisplayExternalID .}}</a></li>
              {{end}}
              </ul>
              </div>
            </td>
          </tr>
        {{end}}
      </tbody>
    </table>

    <div class="pager">
      {{if .NextPage}}
      <span><a href="?page={{.NextPage}}&mode={{.FilterMode}}&status={{.FilterStatus}}">Next&#10095;</a></span>
      {{end}}
    </div>
  </div>
{{end}}
